<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="usersList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单id" align="center" prop="orderId" />
      <el-table-column label="订单总价" align="center" prop="totalPrice" />
      <el-table-column label="销售员" align="center" prop="remark">
        <template #default="scope">
          {{ findUserById(scope.row.remark) }}</template
        >
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="progress" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button link type="primary" @click="viewDetail(scope.row)"
            >查看详情</el-button
          >
          <el-button
            :disabled="scope.row.comment.length != 0"
            link
            type="primary"
            @click="comment(scope.row)"
            >申请理赔</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 评价 -->
    <el-dialog v-model="showComment" title="原因" width="800">
      <el-input v-model="commentText" placeholder="请输入申请原因" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showComment = false">关闭</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 购物车 -->
    <el-dialog v-model="showCar" title="详情" width="800">
      <el-table :data="detail" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="price" label="价格" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCar = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Users">
import {
  listOrders,
  getOrders,
  delOrders,
  addOrders,
  updateOrders,
} from "@/api/orders/orders";
import { addComment, listComment } from "@/api/comment/comment";
import {
  listDishes,
  getDishes,
  delDishes,
  addDishes,
  updateDishes,
} from "@/api/dishes/dishes";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";

const usersList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const commentText = ref("");
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10000,
    username: null,
    password: null,
    email: null,
    phone: null,
  },
  rules: {
    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  },
});
import { listUser, addUser, updateUser, delUser } from "@/api/system/user";
const { queryParams, form, rules } = toRefs(data);
import { ElMessage } from "element-plus";
const userInfo = ref({});
const showCar = ref(false);
const showComment = ref(false);
const detail = ref([]);
const dishesList = ref([]);
const currentOrderId = ref("");
const currentComment = ref("");
const userList = ref([]);
const init = () => {
  useUserStore()
    .getInfo()
    .then((res) => {
      const { user } = res;
      userInfo.value = user;
    });
};
init();

const getUserList = async () => {
  const { rows } = await listUser({ pageNum: 1, pageSize: 10000 });
  userList.value = rows.filter((v) => v.roleIds[0] === 2 || v.roleIds[0] === 6);
};

// 根据id查询用户
const findUserById = (id) => {
  const current = userList.value.filter((v) => v.userId == id)[0];
  console.log(111,current);

  return current?.userName;
};

getUserList();

/** 查询用户管理列表 */
function getList() {
  loading.value = true;
  listOrders(queryParams.value).then((response) => {
    response.rows.forEach((v) => {
      v.comment = "";
    });
    listComment().then((reseponse2) => {
      response.rows.map((item1) => {
        reseponse2.rows.map((item2) => {
          if (
            item2.userId == userInfo.value.userId &&
            item2.orderId == item1.orderId
          ) {
            item1.comment = item2.contant;
          }
        });
      });
      response.rows.forEach((v) => {
        if (v.status == 0 && v.comment.length == 0) {
          v.progress = "已投保";
        } else if (v.status == 0 && v.comment.length != 0) {
          v.progress = "已申请理赔";
        } else if (v.status == 1) {
          v.progress = "已理赔";
        }
      });
      usersList.value = response.rows.filter(
        (v) => v.userId == userInfo.value.userId
      );
    });

    total.value = response.total;
    loading.value = false;
  });
}

const getDishName = () => {
  listDishes(queryParams.value).then((response) => {
    dishesList.value = response.rows;
  });
};
getDishName();
// 根据id查找菜品类别
const findDishById = (id) => {
  const current = dishesList.value.filter((v) => v.dishId === id)[0];
  return current.name;
};

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    userId: null,
    username: null,
    password: null,
    email: null,
    phone: null,
    createdAt: null,
    updatedAt: null,
  };
  proxy.resetForm("usersRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 查看详情操作 */
function viewDetail(row) {
  showCar.value = true;
  row.tbOrderItems.map((item) => {
    item.name = findDishById(item.dishId);
  });
  detail.value = row.tbOrderItems;
  currentComment.value = row.remark;
}

// 评价
const comment = (row) => {
  currentOrderId.value = row.orderId;
  showComment.value = true;
  commentText.value = "";
};

const submit = () => {
  addComment({
    id: "",
    userId: userInfo.value.userId,
    orderId: currentOrderId.value,
    contant: commentText.value,
  }).then((res) => {
    ElMessage({
      message: "申请成功",
      type: "success",
    });
    showComment.value = false;
    getList();
  });
};

getList();
</script>
